<template>
  <!-- 数据汇总 -->
  <div class="dataCollection-page" v-loading="operationsLoading">
    <h3>数据汇总</h3>
    <AreaTitleWarp :title="''">
      <el-button type="primary" icon="el-icon-search" @click="search">更新</el-button>
    </AreaTitleWarp>

    <AreaTitleWarp :title="'用户数据'"></AreaTitleWarp>
    <AreaWarp :padding="true">
      <div class="data" v-if="operationsData">
        <ul class="userData">
          <li></li>
          <li>激活数</li>
          <li>注册数</li>
          <li>登录数</li>
          <li>基本信息认证数</li>
          <li>人脸识别数</li>
          <li>实名认证数</li>

          <li>运营商认证数</li>
          <li>芝麻分认证数</li>
          <li>银行卡认证数</li>
        </ul>
        <ul class="userData">
          <li>今日</li>
          <li>{{ operationsData.todayActivate }}</li>
          <li>{{ operationsData.todayRegist }}</li>
          <li>{{ operationsData.todayLogin }}</li>
          <li>{{ operationsData.todayBasicInfo }}</li>
          <li>{{ operationsData.todayFaceInfo }}</li>
          <li>{{ operationsData.todayRealname }}</li>

          <li>{{ operationsData.todayPhone }}</li>
          <li>{{ operationsData.todaySesame }}</li>
          <li>{{ operationsData.todayBankcard }}</li>
        </ul>
        <ul class="userData">
          <li>昨日</li>
          <li>{{ operationsData.yesterdayActivate }}</li>
          <li>{{ operationsData.yesterdayRegist }}</li>
          <li>{{ operationsData.yesterdayLogin }}</li>
          <li>{{ operationsData.yesterdayBasicInfo }}</li>
          <li>{{ operationsData.yesterdayFaceInfo }}</li>
          <li>{{ operationsData.yesterdayRealname }}</li>

          <li>{{ operationsData.yesterdayPhone }}</li>
          <li>{{ operationsData.yesterdaySesame }}</li>
          <li>{{ operationsData.yesterdayBankcard }}</li>
        </ul>
        <ul class="userData">
          <li>周累计</li>
          <li>{{ operationsData.weekActivate }}</li>
          <li>{{ operationsData.weekRegist }}</li>
          <li>{{ operationsData.weekLogin }}</li>
          <li>{{ operationsData.weekBasicInfo }}</li>
          <li>{{ operationsData.weekFaceInfo }}</li>
          <li>{{ operationsData.weekRealname }}</li>

          <li>{{ operationsData.weekPhone }}</li>
          <li>{{ operationsData.weekSesame }}</li>
          <li>{{ operationsData.weekBankcard }}</li>
        </ul>
        <ul class="userData">
          <li>月累计</li>
          <li>{{ operationsData.monthActivate }}</li>
          <li>{{ operationsData.monthRegist }}</li>
          <li>{{ operationsData.monthLogin }}</li>
          <li>{{ operationsData.monthBasicInfo }}</li>
          <li>{{ operationsData.monthFaceInfo }}</li>
          <li>{{ operationsData.monthRealname }}</li>

          <li>{{ operationsData.monthPhone }}</li>
          <li>{{ operationsData.monthSesame }}</li>
          <li>{{ operationsData.monthBankcard }}</li>
        </ul>
        <ul class="userData">
          <li>总累计</li>
          <li>{{ operationsData.totalActivate }}</li>
          <li>{{ operationsData.totalRegist }}</li>
          <li>{{ operationsData.totalLogin }}</li>
          <li>{{ operationsData.totalBasicInfo }}</li>
          <li>{{ operationsData.totalFaceInfo }}</li>
          <li>{{ operationsData.totalRealname }}</li>

          <li>{{ operationsData.totalPhone }}</li>
          <li>{{ operationsData.totalSesame }}</li>
          <li>{{ operationsData.totalBankcard }}</li>
        </ul>
      </div>
    </AreaWarp>


    <AreaTitleWarp :title="'业务数据'"></AreaTitleWarp>
    <AreaWarp :padding="true">
      <div class="data" v-if="operationsData">
        <ul class="userData">
          <li></li>
          <li>提交申请数</li>
          <li>审核通过数</li>
          <li>放款人数</li>
          <li>放款额</li>
          <li>入催率</li>
          <li>出催率</li>
        </ul>
        <ul class="userData">
          <li>今日</li>
          <li>{{ operationsData.todayApply }}</li>
          <li>{{ operationsData.todayExamine }}</li>
          <li>{{ operationsData.todayLoanOrder }}</li>
          <li>{{ operationsData.todayLoanNum }}</li>
          <li>--</li>
          <li>--</li>
        </ul>
        <ul class="userData">
          <li>昨日</li>
          <li>{{ operationsData.yesterdayApply }}</li>
          <li>{{ operationsData.yesterdayExamine }}</li>
          <li>{{ operationsData.yesterdayLoanOrder }}</li>
          <li>{{ operationsData.yesterdayLoanNum }}</li>
          <li>{{ operationsData.yesterdayEntryRate }}</li>
          <li>--</li>
        </ul>
        <ul class="userData">
          <li>周累计</li>
          <li>{{ operationsData.weekApply }}</li>
          <li>{{ operationsData.weekExamine }}</li>
          <li>{{ operationsData.weekLoanOrder }}</li>
          <li>{{ operationsData.weekLoanNum }}</li>
          <li>{{ operationsData.weekEntryRate }}</li>
          <li>--</li>
        </ul>
        <ul class="userData">
          <li>月累计</li>
          <li>{{ operationsData.monthApply }}</li>
          <li>{{ operationsData.monthExamine }}</li>
          <li>{{ operationsData.monthLoanOrder }}</li>
          <li>{{ operationsData.monthLoanNum }}</li>
          <li>{{ operationsData.monthEntryRate }}</li>
          <li>--</li>
        </ul>
        <ul class="userData">
          <li>总累计</li>
          <li>{{ operationsData.totalApply }}</li>
          <li>{{ operationsData.totalExamine }}</li>
          <li>{{ operationsData.totalLoanOrder }}</li>
          <li>{{ operationsData.totalLoanNum }}</li>
          <li>{{ operationsData.totalEntryRate }}</li>
          <li>{{ operationsData.totalUrging }}</li>
        </ul>
      </div>
    </AreaWarp>
  </div>
</template>
<script>
  import {getTimestamp} from '../../../assets/js/time'
  export default({
    data(){
      return{
        operationsData:null,
        operationsLoading:false
      }
    },
    methods: {
      search(){
        let that = this;
        that.operationsLoading = true;
        that.ajaxJson({
          url: '/operations/generals',
          data: { },
          success: function (data) {
            if (data.code == '0') {
              that.operationsData = data.data
            }
            that.operationsLoading = false;
          }
        })
      },
    },
    created(){
      let that = this;
      that.search();
    }
  })
</script>
<style lang="less">
  .dataCollection-page{
    .data{
      padding-bottom: 20px;
      .userData{
        display: flex;
        li{
          width:10%;
          height:30px;
          border:1px solid #ddd;
          text-align: center;
          line-height: 30px;
          flex-direction: row;
          justify-content: space-betwween;
          flex-wrap: nowrap;
          font-size:13px;
        }
      }
    }
  }
</style>
